<template>
	<!-- 用户名，用户头像 -->
	<view class="nameAvatar" @tap="openLogin">
		<text class="name">{{nickName || '点击登录'}}</text>
		<image class="avatar" :src="avatarUrl || '/static/user.png'" mode="aspectFit"></image>
	</view>
</template>

<script setup lang="ts">
	type Props = {
		avatarUrl ? : String,
		nickName ? : String,
	}
	let props = withDefaults(defineProps < Props > (), {
		avatarUrl: () => "",
		nickName: () => "",
	});

	// 打开登录页面
	let openLogin = () => {
		if (props.nickName && props.avatarUrl) return console.log("用户登录了")
		uni.navigateTo({
			url: "/pagesLoginRegister/login"
		})
	}
</script>

<style lang="scss" scoped>
	.nameAvatar {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0rpx 40rpx;
	}

	.name {
		font-size: 42rpx;
		font-weight: bolder;
	}

	.avatar {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		overflow: hidden;
	}
</style>
